
const port =13333
const $url = "http://127.0.0.1:" + port

window.onload = function() {
    // 获取时间元素
    var timeElement = document.getElementById("time");

    // 每秒更新时间
    setInterval(function() {
      // 创建一个新的日期对象
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth();
      var day = date.getDate();

      var weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      var dayOfWeek = weekDays[date.getDay()];
      // 获取小时、分钟和秒
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();

      // 格式化时间字符串
      var timeString =
        (year) +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        // (dayOfWeek ) + " " +
        (hours < 10 ? "0" + hours : hours) +
        ":" +
        (minutes < 10 ? "0" + minutes : minutes) +
        ":" +
        (seconds < 10 ? "0" + seconds : seconds);

      // 更新时间元素的内容
      timeElement.innerHTML = timeString;
    }, 1000); // 1000毫秒 = 1秒
  };

// var pageWidth = document.documentElement.scrollWidth;
// var pageHeight = document.documentElement.scrollHeight;
// console.log(pageWidth,pageHeight)

var updata = []
var $musictip = []
var visible_temp = false
var getfault=false
var actstatue = []
var imgsrc = []
async function AddAJAX() {
  let res = await http({
    url: $url + "/getTableData",
      type: "POST",
      data: {db:"xiaozhi_eyes_210"},
      contextType: "application/json",
  })
  let datad = res.data[0][0]
        // console.log(datad)
        updata = [datad.CarType, datad.KNR, datad.VIN, datad.UpdateTime]
        
        var html2 = '<span> <button style="height:80%;line-height:80%;" >查询系统&nbsp;&nbsp;&nbsp;</button></span><span style="" class="shenglue">车型：</span>'+
            '<span style="color:#37b2fa;" class="shenglue">'+datad.CarType +'&nbsp;&nbsp;&nbsp;</span>'+
            '<span style=""> KNR：</span>'+
            '<span style="color:#37b2fa;" class="shenglue">'+datad.KNR+ '&nbsp;&nbsp;&nbsp;</span>'+
            '<span style="">VIN：</span>'+
            '<span style="color:#37b2fa;" class="shenglue">'+datad.VIN+'&nbsp;&nbsp;&nbsp;</span>'+
            '<span style="">进站时间：</span>'+
            '<span style="color:#37b2fa;">'+datad.UpdateTime +'</span>'
        var divElement2 = document.getElementById("current")
        divElement2.innerHTML = html2;


        let data3 = []
        var count = 0
        var arr = []
        // console.log(res.data[1])
        res.data[1].forEach((item) => {
          data3.push([item.NAME, item.visualResult == null ? "reserve" : item.visualResult, item.visualPosition, item.station, item.postName,item.savePathResult,item.CarType])
          if (item.visualResult == "NOK") {
            count += 1
            arr.push(item.NAME)
          }
        })
        if (data3.length <= 24) {
          var len1 = 24 - data3.length
          for (var i = 0; i < len1; i++) {
            data3.push(['', '', 'a', '', '', '', ''])
          }
        }
        if (data3.length > 24) {
          let len1 = 6 - data3.length % 6
          for (var i = 0; i < len1; i++) {
            data3.push(['', '', 'a', '', '', '', ''])
          }
        }

        // console.log('报警',count,this.musicON)
        var musictip = updata
        for (var i = 0; i < arr.length; i++) {
          musictip.push(arr[i] + " 视觉不合格")
        }
        var tempv1 = false
        if (count > 0 && musictip[1] != '') {
          for (var i = 0; i < musictip.length; i++) {
            if ($musictip.includes(musictip[i]) == false) {
              // console.log(this.musictip,'====',musictip)
              tempv1 = true
              this.getfault = true
            }
          }
        }
        visible_temp = tempv1
        // console.log("v2",this.getfault)
        $musictip = musictip
        actstatue = data3

        // console.log(142,data3)

        var html1 = ''
        // 使用JavaScript的for循环生成列表内容
        imgsrc = []
        for (var i = 0; i < actstatue.length; i++) {
          let img88 = ''
          if (actstatue[i][5]){
            actstatue[i][5] = actstatue[i][5] + '/' + datad.KNR + '/' + actstatue[i][2] + '.jpg'
            // console.log(data3[i][5] = data3[i][5] )
            img88 = await readImg(actstatue[i][5])
            // console.log(143,img88)
          }
          imgsrc.push([actstatue[i][0],actstatue[i][1],actstatue[i][2],actstatue[i][3],actstatue[i][4],actstatue[i][5],actstatue[i][6],img88])
          
        //   html1 = html1+'<div class="block2">'+
        //   '<div class="HisTitle" style="width:100%;height:15%;">'+data3[i][0]  + '</div><div style="width:100%;height:70%;" class="bar-row" >'
        //   + '<div id="loader'+i +'"  ></div>'+'<img id="img'+i +'"src="'+img88
        //   +'" width="100%" height="100%" alt="" style="display: display;" onclick="openPopup('+ i + ')"/>'+'</div>'
        //   +'<div class="statue" style="" >'+ data3[i][1]  +'</div></div>'
        // }
        var divimg = ''
        if(img88 ==300 ){
          divimg = '<p style="color:#fff">获取图片失败</p>'
          
        }else if(img88 == ''){
          divimg = ''
        }else{
          divimg = ' <img id="img'+i +'"src="'+img88
          +'" width="100%" height="100%" alt="" style="display: display;" onclick="openPopup('+ i + ')"/>'
        }
        if(data3[i][1]=='NOK'){
          var divresult ='<div class="statue" style="background-color: rgba(255, 60, 0, 0.8);" >'+ data3[i][1]  +'</div>'
        }else{
          var divresult ='<div class="statue"  >'+ data3[i][1]  +'</div>'
        }
        

        html1 = html1+'<div class="block2">'+
        '<div class="HisTitle" style="width:100%;height:15%;">'+data3[i][0]  + '</div><div style="width:100%;height:70%;" >'
        + divimg+'</div>'
        + divresult+'</div>'
      }
        var divElement = document.getElementById("block1")
        divElement.innerHTML = html1;


}
// AddAJAX()
// setInterval(function() {AddAJAX()}, 5000); // 1000毫秒 = 1秒

async function readImg(path) {
  let res = await http({
    url: $url + "/readImg",
      type: "POST",
      data: {path:path},
      header:{responseType: "blob"},
  })
  return res
}

function stopLoadingAnimation(index) {
  var loader111 = document.getElementById("loader"+ index);
  console.log("img"+ index)
  var img111 = document.getElementById("img"+ index);
  console.log(img111)
  if(img111!=null){img111.style.display = "block";}
  if(!loader111!=null){loader111.style.display = "none";} 
}

function loadFinish(){
  for (var i = 0; i < imgsrc.length; i++) {
    

  }
}


// setInterval(function() {console.log(imgsrc)}, 5000); // 1000毫秒 = 1秒


function openPopup(index) {

  if(imgsrc[index][7]){
    // html3 = '<div class="popup-content">'+'<img src="'+imgsrc[i] +'" width="100%" height="100%" alt=""/><button onclick="closePopup()">关闭弹窗</button></div>'
    var html3 = '<div class="popup-content bar-row">'+
    '<div class="HisTitle" style="width: 100%;height: 5%;margin-top: 0%;">'+imgsrc[index][0]+'</div>'+
    '<div style="width: 100%;height: 90%;">'+
    '<img src="'+imgsrc[index][7]+'" alt="" width="100%" height="100%" />'+
    '</div><button onclick="closePopup()" style="background-color: rgba(255, 60, 0, 0.8);">关闭弹窗</button></div>'
      // 获取弹窗元素
    var popup = document.getElementById("popup");
    popup.innerHTML = html3
    // 显示弹窗
    popup.style.display = "block";
  }else{
    html3 = '<div class="popup-content"> <div> '
  }
  
  
}

function closePopup() {
  // 获取弹窗元素
  var popup = document.getElementById("popup");
  // 隐藏弹窗
  popup.style.display = "none";
}


   // JavaScript代码开始
  //  var condition = true; // 可以根据需要设置条件

  //  if (condition) {
  //    document.write('<p>条件为真时显示的内容。</p>');
  //  } else {
  //    document.write('<p>条件为假时显示的内容。</p>');
  //  }

